"use client"
import React , { useEffect, useState, useRef }from 'react'
import { Input, Button, Tour, Select, DatePicker } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { request } from '@/lib/request';

const page = () => {
    // 股票数据和历史时间存储
    const [startData, setStartData] = useState('');
    const [sharesCode, setSharesCode] = useState('');
    const [sharesModel, setSharesModel] = useState('sarimax');

    const [show, setShow] = useState(false);

// 处理用户输入
    const reloadCharts = async (obj) => {
      const response = await request.post('http://127.0.0.1:8000/getsharsforecast', obj);
      if(show != false){
        refreshIframes()
      }
      setShow(true)
      // console.log(response);
    };
    const handleOk = () => {
      if (startData.trim() && sharesCode.trim()){
        reloadCharts({ startData, sharesCode, sharesModel });
      }
    };

    // 刷新iframe
    const refreshIframes = () => {
      document.getElementById('iframe1').contentWindow.location.reload();
      document.getElementById('iframe2').contentWindow.location.reload();
    }
// 引导框
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);
  const [open, setOpen] = useState(false);
  const steps = [
    {
      title: '数据录入区域',
      description: '输入历史数据的起始日期,默认会延续到到今天位置。输入股票的编码，你可以在任意股票网站上,或者侧边栏的查看股票功能找到你想要预测的股票的对应编码。3个月以内效果较好,预测的股票数据越具有可靠性!默认预测未来一个月',
      target: () => ref1.current,
    },
    {
      title: '预测股票未来趋势,和展示历史股票走势',
      description: '点击会在下方生成对应的历史走势图,和预测走势图',
      target: () => ref2.current,
    },
    {
      title: '图表显示位置',
      description: '图标会在这里展示',
      target: () => ref3.current,
    },
  ];
  // 选项框
  const handleChange = (value) => {
    console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
    setSharesModel(value.value)
  };
// 选择时间框
  const onChange = (date, dateString) => {
    console.log(date, dateString);
    setStartData(dateString)
  };
  return (
    <div>
      <div ref={ref1}>
      {/* <Input placeholder="历史数据起始时间(越久越准确):20240430" value={startData} onChange={(e) => setStartData(e.target.value)}/> */}
      <DatePicker format={{
        format: 'YYYYMMDD',
        // type: 'mask',
      }}
      onChange={onChange}
      style={{width:"100%"}}
      placeholder="历史数据起始时间(3个月以内效果较好):20240430 不建议ARIMA模型"/>
      <Input placeholder="股票编码:000004" value={sharesCode} onChange={(e) => setSharesCode(e.target.value)}/>
      <Button type="dashed" style={{width:"10%"}} onClick={() => setOpen(true)}>引导使用</Button>
      <Select
    labelInValue
    defaultValue={{
      value: 'sarimax',
      label: '季节性自回归积分滑动平均模型(SARIMAX)',
    }}
    style={{
      width: 400,
    }}
    onChange={handleChange}
    options={[
      {
        value: 'sarimax',
        label: '季节性自回归积分滑动平均模型(SARIMAX)',
      },
      {
        value: 'arima',
        label: '自回归积分滑动平均模型(ARIMA)',
      },
      {
        value: 'exponential_smoothing',
        label: '指数平滑模型(ExponentialSmoothing)',
      },
    ]}
  />
      <Button type="primary" icon={<SearchOutlined />} style={{width:"59%"}} onClick={handleOk} ref={ref2}>
        查询
      </Button>
      </div>
      {show ? (
                <>
                <iframe id="iframe1" src="/lishi.html" title="lishi" width="49%" height="500px" />
                <iframe id="iframe2" src="/yuce.html" title="yuce" width="50%" height="500px" /> 
                </>
            ) : (
              <></>       
            )}
        <Tour
        open={open}
        onClose={() => setOpen(false)}
        steps={steps}
        indicatorsRender={(current, total) => (
          <span>
            {current + 1} / {total}
          </span>
        )}
      />
    </div>
  )
}

export default page


/* <iframe id="iframe1" src="/lishi.html" title="lishi" width="49%" height="500px" />
<iframe id="iframe2" src="/yuce.html" title="yuce" width="50%" height="500px" /> */